<!DOCTYPE html>
<html>
<head>
	<title>芭蕉花管理平台-菜单</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
	<link rel="SHORTCUT ICON" href="/img/favicon.ico">
	<script type="text/javascript">
		var pathname = window.location.pathname;
		if (pathname != "/mobile/home.html") {
			location.href = '/';
		}
	</script>
	<style type="text/css">
		.container {padding: 15px;}
		#menuBox .card {border-radius: 0; border-left: 0; border-right: 0; overflow: visible;}
		#menuBox .card .btn {appearance: none; -moz-appearance: none; -webkit-appearance: none;}
		#menuBox .card .card-header {padding: 0;border-radius: 0; background-color: #fff;}
		#menuBox .card .card-header .btn {color: #17a2b8; border-radius: 0; background-color: rgba(0,0,0,.03); padding: .75rem 1.25rem;}
		#menuBox .card .card-header .btn.collapsed {color: #333333; background-color: #fff;}
		#menuBox .card .card-header .btn>i {padding: 10px; width: 36px; height: 36px;}
		#menuBox .card .card-header .btn>span {padding-left: 10px;}
		#menuBox .card .card-body .btn {padding-left: 30px; color: #555555;}
		#menuBox .card .card-body .btn>i {padding: 10px; width: 36px; height: 36px;}
		#menuBox .card .card-body .btn>span {padding-left: 10px;}
	</style>
</head>
<body>
	<div class="container">
		<div class="row">
			<div class="col-lg-12">
			
				<div class="accordion" id="menuBox">
				</div>
			</div>
		</div>
	</div>
</body>
<script type="text/javascript">
	var sessionId = "";

	// 初始化
	$(function () {
		initSysInfo();
		initMenu();
	});

	//初始化账号信息
	function initSysInfo() {
		var url_getLoginInfo = "/sys/getLoginInfo";
		var params_getLoginInfo = {};
		getMapData(url_getLoginInfo, params_getLoginInfo, function(data, result) {
			if (result == "success") {
				sessionId = data.sessionId;
			}
		});
	}
	//加载菜单
	function initMenu() {
		var url_menu = "/sysmenu/menuList";
		var params_menu = {};
		getMapData(url_menu, params_menu, function(data, result) {
			if (result == "success") {
				var menuList = data.menuList;
				var menuHtml = "";
				for (var i = 0; i < menuList.length; i++) {
					var menu = menuList[i];
					var subMenuList = menu.child;

					menuHtml += '<div class="card" id="menu' + i + '">';
					menuHtml += '<div class="card-header" id="menuHeader' + i + '">';
					menuHtml += '<div>';
					menuHtml += '<div class="btn btn-block text-left collapsed" type="button" data-toggle="collapse" data-target="#menuCollapse' + i + '" aria-expanded="true" aria-controls="menuCollapse' + i + '">';
					menuHtml += '<i class="'+ menu.icon + '"></i>';
					menuHtml += '<span>' + menu.name + '</span>';
					menuHtml += '</div>';
					menuHtml += '</div>';
					menuHtml += '</div>';
					menuHtml += '<div id="menuCollapse' + i + '" class="collapse" aria-labelledby="menuHeader' + i + '" data-parent="#menuBox">';
					menuHtml += '<div class="card-body">';
					for (var j = 0; j < subMenuList.length; j++) {
						var subMenu = subMenuList[j];
						let htmlUrl = "/mobile/" + subMenu.url;
						let htmlHost = "";
						if (subMenu.host != null && subMenu.host != '') {
							htmlHost = subMenu.host;
						}
						menuHtml += '<a class="btn btn-block text-left" type="button" href="#" onclick="loadHtml(' + "'" + htmlHost + "'" + ", "  + "'" + htmlUrl + "'" + ');return false;">';
						menuHtml += '<i class="'+ subMenu.icon + '"></i>';
						menuHtml += '<span>' + subMenu.name + '</span>';
						menuHtml += '</a>';
					}
					menuHtml += '</div>';
					menuHtml += '</div>';
					menuHtml += '</div>';
				}
				$("#menuBox").html(menuHtml);
				for (let i = 0; i < menuList.length; i++) {
					$("#menuCollapse" + i).on('show.bs.collapse', function () {
						$(this).parent().attr("style", "overflow: visible; z-index: 1; box-shadow: 1px 2px 10px #aaa;");
					});
					$("#menuCollapse" + i).on('hide.bs.collapse', function () {
						$(this).parent().removeAttr("style");
					});
				}
			}
		});
	}

	function loadHtml(host, url) {
		let htmlUrl = "";
		let htmlParams = {};
		if (!!host) {
			htmlUrl = host + url;
			htmlParams = {
					"htmlParams": [
						{
							"key" : "host",
							"value" : host
						},
						{
							"key" : "sessionId",
							"value" : sessionId
						}
				]
			}
		} else {
			htmlUrl = url;
		}
		getHtml(htmlUrl, htmlParams);
	}
</script>
</html>